<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button>1</button>
    <button>2</button>
    <button>3</button>

    <script>

        // 闭包：
        //     1 外层函数嵌套了内层函数
        //     2 内层函数访问外层函数的局部变量
        //     3 函数中直接或者间接的返回了一个函数
        //     4 外面接受了这个函数  （可以通过调用这个函数不断的去使用或者改变这个变量）   --- 形成了不会被销毁的执行空间


        // 为什么使用闭包
        //    全局变量容易遭到污染  --- 变成局部变量且让他可以在外面使用




        // function f1() {
        //     var a = 1 ;
        //     function f2() {
        //         a++ ;
        //         console.log(a);
        //     }
        //     return f2
        // }

        // var res = f1() ;   // 得到一个函数
        // res()    // 2
        // res()    // 3
        // res()    // 4


        // f1()()   // 2



        // const oBtns = document.querySelectorAll('button');
        // for(var i = 0 ; i < oBtns.length ; i++) {
        //     oBtns[i].onclick = function() {
        //         console.log(i);  // 3
        //     }
        // }



        // for(var i = 0 ; i < 10 ; i++) {
        //     setTimeout(function() {
        //         console.log(i);
        //     },1000)
        // }

        // for(var i = 0 ; i < 10 ; i++) {
        //     setTimeout(fn(),1000)   // fn是立即执行了，且返回了一个函数  这个返回的函数才是真正给延时器的回调函数
        // }

        // function fn(){
        //     console.log(i);
        //     return function() {
        //         console.log(i);
        //     }
        // }


        // for(var i = 0 ; i < 10 ; i++) {
        //     setTimeout((function(){
        //         console.log(i);    // 0-9
        //         return function() {
        //             console.log(i);   // 10个10
        //         }
        //     })(),1000)
        // }




        const oBtns = document.querySelectorAll('button');
        // for (var i = 0; i < oBtns.length; i++) {
        //     oBtns[i].onclick = fn
        // }

        // function fn() {
        //     console.log(i);  // 3
        // }


        // for (var i = 0; i < oBtns.length; i++) {
        //     oBtns[i].onclick = fn(i)
        // }

        // function fn(a) {
        //     return function() {
        //         console.log(a);  
        //     }
        // }

        for (var i = 0; i < oBtns.length; i++) {
            oBtns[i].onclick = (function(a) {
                return function(e) {    // 这才是真正的事件处理函数
                    // console.log(e);
                    // console.log(this);
                    console.log(a);
                }
            })(i)
        }

     



    </script>

</body>

</html>